<template>
  <div class="bigbox">
    <div class="topbox">
      <ElForm @checkshow="(val)=>{isshow=val}" @getlist="getlist" />
    </div>
    <div class="bodybox" :style="{ height: isshow ? 'calc(100% - 150px)' : 'calc(100% - 90px)' }">
      <TopTitle @command="(val)=>{issize=val}" @daochu="exporttab" @shuaxin="getlist(formdata)">
        <template #centerother>
          <div class="title">{{formdata.orgName}} {{formdata.startDate}} 至 {{formdata.endDate}} 小时用电量报表(kWh)</div>
        </template>
      </TopTitle>
      <div class="tablebox">
        <TableColumn
          ref="tabledata"
          :tableData="tableData" 
          :tableConfig="tableConfig" 
          :issize="issize" />
      </div>
    </div>
  </div>
</template>
<script>
import ElForm from '../component/el-form.vue'
import { exportexcel } from '@/utils/excel'
import {getElectricityListapi} from '@/api/ElectricalDistribution/hour-power-report'
export default {
  name: 'CallPoliceElForm',
  components: {
    ElForm
  },
  data() {
    return {
      isshow: false,
      formdata:{},      
      tableData:[],
      issize:'medium',
      tableConfig: []
    }
  },
  methods: {
    async getlist(val) {
      this.formdata={...val}
      this.$refs.tabledata.loading=true
      const {data:{list}}=await getElectricityListapi(this.formdata)
      this.tableData= list.map(item => {
      const hourObj = item.hourList.reduce((obj, val, index) => {
        obj[`hour${index}`] = val
          return obj
        }, {})
        return { ...item, ...hourObj }
      })
      this.tableConfig = [
        {label: '设备名称',prop: 'deviceName',width: 180},
        {label: '日期',prop: 'dateString',width: 120},
        ...Array.from({ length: 24 }, (_, index) => ({
          label: `${index}点`,
          prop: `hour${index}`
        }))
      ]
      this.$refs.tabledata.loading=false
    },
     // 导出
    exporttab() {
      exportexcel(
        '/pio-microservice-biz/pio/ect/report/form/hour/electricity/report/exportExcel',
        this.formdata,
        '小时电量报表'
      )
    }
  }
}
</script>
<style scoped lang="scss">
.bigbox {
  height: 100%;
  padding: 10px;
  .topbox {
    margin-bottom: 10px;
    background-color: #fff;
  }
  .bodybox {
    padding: 20px;
    background-color: #fff;
    .title{
      font-size: 20px;
      color: #000;
    }
    .tablebox{
      height: calc(100% - 50px);
    }
  }
}
</style>